<template>
  <view class="delay-container">
    <u-form :model="formData" ref="form" :rules="rules" label-width="120">
      <!-- 原订单信息 -->
      <view class="section-card">
        <view class="section-title">原订单信息</view>
        
        <view class="info-item">
          <text class="label">订单号:</text>
          <text class="value">{{formData.orderNo}}</text>
        </view>
        
        <view class="info-item">
          <text class="label">门店名称:</text>
          <text class="value">{{formData.mchName}}</text>
        </view>
        
        <view class="info-item">
          <text class="label">房间名称:</text>
          <text class="value">{{formData.roomName}}</text>
        </view>
        
        <view class="info-item">
          <text class="label">开始时间:</text>
          <text class="value">{{formData.beginTime}}</text>
        </view>
        
        <view class="info-item">
          <text class="label">结束时间:</text>
          <text class="value">{{formData.endTime}}</text>
        </view>
      </view>

      <!-- 延期信息 -->
      <view class="section-card">
        <view class="section-title">延期信息</view>
        
        <u-form-item label="延期时长" prop="delayHours" required>
          <u-number-box 
            v-model="formData.delayHours" 
            :min="1" 
            :max="24"
            @change="calculateAmount"
          ></u-number-box>
          <text class="unit">小时</text>
        </u-form-item>

        <u-form-item label="新结束时间">
          <text class="readonly-text">{{newEndTime}}</text>
        </u-form-item>
      </view>

      <!-- 费用信息 -->
      <view class="section-card">
        <view class="section-title">费用信息</view>
        
        <view class="amount-section">
          <view class="amount-item">
            <text class="label">延期费用</text>
            <text class="value">¥ {{(formData.delayFee/100).toFixed(2)}}</text>
          </view>
          <view class="amount-item total">
            <text class="label">总计</text>
            <text class="value">¥ {{(formData.delayFee/100).toFixed(2)}}</text>
          </view>
        </view>
      </view>
    </u-form>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <u-button type="primary" @click="submitForm">保存</u-button>
      <u-button type="default" @click="goBack">关闭</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: '', // 订单ID
        orderNo: '', // 订单号
        mchName: '', // 门店名称
        roomName: '', // 房间名称
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        delayHours: 1, // 延期小时数
        delayFee: 0, // 延期费用
      },
      
      rules: {
        delayHours: [{
          required: true,
          message: '请选择延期时长'
        }]
      }
    }
  },
  
  computed: {
    // 计算新的结束时间
    newEndTime() {
      if(!this.formData.endTime) return ''
      const date = new Date(this.formData.endTime)
      date.setHours(date.getHours() + this.formData.delayHours)
      return this.$u.timeFormat(date, 'yyyy-mm-dd hh:MM:ss')
    }
  },
  
  onLoad(options) {
    if(options.type === 'edit') {
      // 从 storage 获取编辑数据
      const editData = uni.getStorageSync('delayOrderInfo')
      if(editData) {
        this.formData = {
          ...this.formData,
          ...editData
        }
        // 计算延期费用
        this.calculateAmount()
      }
    }
  },
  
  methods: {
    // 获取订单详情
    getOrderDetail(id) {
	  //发送GET请求获取订单详情_已完成
      uni.$u.http.get(`/system/order/${id}`).then(res => {
        if(res.code === 0) {
          this.formData = {
            ...res.data,
            delayHours: 1
          }
          this.calculateAmount()
        }
      })
    },
    
    // 计算延期费用
    calculateAmount() {
	  //发送POST请求计算费用_未完成	
      uni.$u.http.post('/system/order/calculate/delay', {
        orderId: this.formData.id,
        delayHours: this.formData.delayHours
      }).then(res => {
        if(res.code === 0) {
          this.formData.delayFee = res.data.delayFee
        }
      })
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if(valid) {
		  //发送POST提交订单信息_未测试
          uni.$u.http.post('/system/order/delay', {
            orderId: this.formData.id,
            delayHours: this.formData.delayHours
          }).then(res => {
            if(res.code === 0) {
              uni.showToast({
                title: '延期成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
          })
        }
      })
    },
    
    // 返回
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.delay-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.section-card {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
    margin-bottom: 20rpx;
  }
}

.info-item {
  display: flex;
  padding: 20rpx;
  
  .label {
    width: 160rpx;
    color: #666;
    font-size: 28rpx;
  }
  
  .value {
    flex: 1;
    color: #333;
    font-size: 28rpx;
  }
}

.readonly-text {
  color: #666;
  font-size: 28rpx;
}

.unit {
  margin-left: 20rpx;
  color: #666;
  font-size: 28rpx;
}

.amount-section {
  padding: 20rpx;
  
  .amount-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .label {
      color: #666;
      font-size: 28rpx;
    }
    
    .value {
      color: #333;
      font-size: 28rpx;
    }
    
    &.total {
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1px solid #eee;
      
      .value {
        color: #f56c6c;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
}

.bottom-btns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  gap: 30rpx;
  box-shadow: 0 -2rpx 6rpx rgba(0,0,0,0.05);
}

:deep(.u-form-item) {
  padding: 20rpx;
  margin-bottom: 10rpx;
}
</style>